<template>
	<view class="goods-wrap" :class="props.mode == 'grid' ? 'grid-mode' : 'list-mode'">
		<view @click="toGoodDetail(item)" v-for="(item, index) in props.list" :key="index"> 
			<view class="image">
				<view class="absolute left-0 top-0 w-full h-full">
					<u-image :src="item.ImageUrl[0]" width="100%" height="100%"></u-image>
				</view>
			</view>
			<view class="p-[8px] flex flex-col justify-between">
				<view class="line-clamp-2 text-[14px] text-[#333333] leading-[24px] h-[48px] text-ellipsis">{{item.ProductName}}</view>
				<view class="text-[14px] text-[#d81e06]">¥{{item.MemberPrice}}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {ref} from "vue";
	
	const props = defineProps(['list','mode']);
	
	const toGoodDetail = item => {
		uni.navigateTo({
			url:`/pages/goodsDetail/goodsDetail?id=${item.ProductID}`
		})
	}
	
</script>

<style lang="scss">
	.goods-wrap{
		padding: 16px 16px 0;
		
		& > view{
			margin-bottom: 10px;
			border-radius: 4px;
			overflow: hidden;
		}
	}
	
	.grid-mode{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		
		& > view{
			width: calc(50% - 8px);
			border-radius: 4px;
			background-color: #FFFFFF;
			
			& > .image{
				position: relative;
				width: 100%;
				padding-top: 100%;
			}
		}	
	}
	.list-mode{
		display: flex;
		flex-direction: column;
		
		& > view{
			display: flex;
			flex-direction: row;
			border-radius: 4px;
			background-color: #FFFFFF;
			
			& > .image{
				position: relative;
				width: 120px;
				height: 120px;
				flex-shrink: 0;
				background-color: #FE0200;
			}
		}
	}
</style>